<template>
  <div>
    <h5 @click="changeOpen">{{ data.name }}</h5>
    <ul :style="{ display: open ? '' : 'none' }" class="animate__animated animate__fadeIn animate__delay-0.1s">
      <li v-for="item in data.children">
        <nuxt-link :to="item.path">{{ item.name }}</nuxt-link>
      </li>
    </ul>
  </div>
</template>

<script>
import 'animate.css';
export default {
  data() {
    return {
      open: false
    }
  },
  props: {
    data: Object
  },
  created() {
    this.open = this.data?.open
  },
  methods: {
    changeOpen() {
      this.open = !this.open
    }
  }
}
</script>

<style scoped lang="less">
h5 {
  height: 26px;
  margin-bottom: 6px;
  font-size: 16px;
}

li {
  height: 24px;
  font-size: 14px;
  text-indent: 1rem;
  opacity: 0.9;
}
</style>
